<template>
    <div class="container">
        <el-card class="box-card" shadow="none">
            <div slot="header" class="clearfix">
                <span style="font-weight:bold">投诉</span>
                <el-steps :active="active_step" align-center>
                    <el-step title="投诉须知" icon="el-icon-info"></el-step>
                    <el-step title="填写投诉" icon="el-icon-edit"></el-step>
                    <el-step title="提交成功" icon="el-icon-success"></el-step>
                </el-steps>
            </div>
            <div class="main_body">
                <!-- 内容区域 -->
                <!-- 第一步 -->
                <ComplaintNeedToKnow v-show="active_step === 0" />
                <el-button v-show="active_step === 0" type="primary" :disabled="count_down > 0" class="allow_btn"
                    size="medium" @click="active_step++">
                    {{ count_down === 0 ? '我已知晓' : count_down + 's 请阅读' }} <i class="el-icon-right"></i>
                </el-button>

                <!-- 第二步 -->
                <ComplaintForm v-show="active_step === 1" @pre_step="pre_step" @next_step="next_step" />


                <!-- 第三步 -->
                <SubmitSuccess v-show="active_step === 2" @back="back" />
            </div>

        </el-card>
    </div>
</template>

<script>
import ComplaintNeedToKnow from './complaints_need_to_know.vue'
import ComplaintForm from './complaints_form.vue'
import SubmitSuccess from './submit_success.vue'
import SvgIcon from '@/components/reusable_components/SvgIcon.vue';
export default {


    components: {
        SvgIcon,
        ComplaintNeedToKnow,
        ComplaintForm,
        SubmitSuccess,
    },

    data() {
        return {
            active_step: 0,
            count_down: 10,
            timer: null,
            allow_disable: true

        }
    },

    mounted() {
        this.itinerary_id = this.$route.query.id // 取得id
        this.title = this.$route.query.title
        this.user = this.$route.query.user
        this.get_countdown()
    },

    methods: {
        // 返回上一页
        goBack() {
            this.$router.back()
        },

        // 倒计时
        get_countdown() {
            let clock = window.setInterval(() => {
                this.count_down--;
                if (this.count_down < 0) {
                    this.count_down = 0;
                    window.clearInterval(clock);
                }
            }, 1000);
        },

        pre_step(val) {
            if (val) this.active_step--
        },

        next_step(val) {
            if (val) this.active_step++
        },

        back() {
            this.active_step--
        },

        async submit_complaints() {
            this.active_step++
            try {
                const res = await this.$http.get("/findAllAgency")//这里使用和更多页面一样的接口
                // 处理数据


            } catch (error) {
                // console.log(error);
            }
        },

        // 执行查找
        async search() {
            console.log('search')
            console.log(this.filter_price)
        },


        async book(id) {
            console.log('book')
            try {
                const res = await this.$http.get("/findAllAgency")//这里使用和更多页面一样的接口
                // 处理数据


            } catch (error) {
                // console.log(error);
            }
        },
    },


}
</script>

<style lang="less" scoped>
.container {
    width: 61.8vw;
    min-width: 950px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);

    .main_body {
        width: 70%;
        height: 70vh;
        overflow: auto;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0%);


        display: flex;

        flex-wrap: wrap;

        -ms-overflow-style: none;
        // /* IE 10+ */

        scrollbar-width: none;
        /* Firefox */


        .allow_btn {
            margin: 0 auto;
        }


    }

    .next_btn {
        margin: 0 auto;
        height: 40px
    }

    .main_body::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }



    .more {
        margin-top: 1vh;
    }

    .box-card {
        border: 0;
    }

}
</style>